<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo09-组件-正常data</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div>

        <button-counter-shared></button-counter-shared>
        <button-counter-shared></button-counter-shared>
        <button-counter-shared></button-counter-shared>
      </div>
      <div>
        <blog-title p-title="ssdd" content="hh1"></blog-title>
        <!-- <blog-title title="biao02" :content="'hh2'"></blog-title> -->
        <!-- <blog-title title="biao03" :content="'hh3'"></blog-title> -->
      </div>
    </div>
</body>
<script>
Vue.config.productionTip = false;

Vue.component('blog-title',{
  // pTitle 必须是camelcase，若与dom一致kebabcase会无效！
  props:['pTitle' , 'content'],
  template:'<div> <h3>标题：{{pTitle}} </h3><span>子标题：{{content}}</span> </div>'
});


Vue.component('button-counter-shared', {
  data: function() { 
      return {
        count: 0
      }
  },
  template: '<button v-on:click="docount">You clicked me {{ mycount }} times.</button>',
  computed:{
      mycount:function(){
        //   return 0
        // var thiscount = this.count
          return this.count
        // return thiscount
      }
  },
  methods:{
      docount:function(){
          this.count++;
      }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    content: 'asdfasdfas',
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
});

</script>
</html>